<template>
  <view>
    <view class="tabs">
      <view @click="switchTab(1)" :class="{'active': currentTab === 3}">未审批</view>
      <view @click="switchTab(2)" :class="{'active': currentTab === 2}">已审批</view>
    </view>
    <view v-for="(item, index) in filteredLeaveList" :key="index" class="leave-item" @click="toggleDetail(index)">
      <image :src="isLeave(item.status)"
             :style="{width:setStyle(item.status,'width')+'rpx',height:setStyle(item.status,'height')+'rpx'}"
             mode="" class="statImg"></image>
      <view class="title">{{ item.title }}</view>
      <view class="contenT" style="margin-top: 20rpx;">
        <text class="text1">学号：</text>
        <text class="text2">{{ item.sno }}</text>
      </view>
      <view class="contenT">
        <text class="text1">姓名：</text>
        <text class="text2" style="font-weight: bold;">{{ item.sname }}</text>
      </view>
      <view class="contenT">
        <text class="text1">班级：</text>
        <text class="text2">{{ item.clazz }}</text>
      </view>
      <view v-if="expanded.includes(index)" class="contenT">
        <text class="text1">电话：</text>
        <text class="text2">{{ item.phone }}</text>
      </view>
      <view v-if="expanded.includes(index)" class="contenT">
        <text class="text1">请假类型：</text>
        <text class="text2">{{ item.type }}</text>
      </view>
      <view v-if="expanded.includes(index)" class="contenT">
        <text class="text1">审批人：</text>
        <text class="text2">{{ item.tname }}</text>
      </view>
      <view v-if="expanded.includes(index)" class="contenT">
        <text class="text1">开始时间：</text>
        <text class="text2">{{ item.starttime }}</text>
      </view>
      <view v-if="expanded.includes(index)" class="contenT">
        <text class="text1">结束时间：</text>
        <text class="text2">{{ item.endtime }}</text>
      </view>
      <view v-if="expanded.includes(index)" class="contenT"
            style="display: flex; justify-content: space-between; margin-top: 20rpx;">
        <button v-if="item.status === 0" @click="approveLeave(item)" class="smaller">同意</button>
        <button v-if="item.status === 0" @click="showRejectModal(item)" class="smaller">驳回</button>
      </view>
    </view>
    <!-- 模态对话框 -->
    <view v-if="showModal" class="modal">
      <view class="modal-content">
        <view class="modal-header">
          <text>驳回理由</text>
        </view>
        <view class="modal-body">
          <input type="text" v-model="beizhu" placeholder="请输入驳回理由" />
        </view>
        <view class="modal-footer">
          <button @click="submitReject(currentItem)">提交</button>
          <button @click="hideModal">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
	export default {
		data() {
			return {
				leaveList: [],
				showModal: false,
				beizhu: '', // 存储驳回理由
				currentItem: null, // 当前操作的假条信息
				account: '',
				currentTab: 1, // 默认显示未审批页面
				expanded: [] // 跟踪展开状态
			};
		},
		onLoad() {
			this.account = uni.getStorageSync('account');
			this.queryleavelist();
			console.log(this.account);
		},
		computed: {
			filteredLeaveList() {
				if (this.currentTab === 1) {
					return this.leaveList.filter(item => item.status === 0);
				} else {
					return this.leaveList.filter(item => item.status === 1 || item.status === 2);
				}
			}
		},
		methods: {
			toggleDetail(index) {
				// 切换展开状态
				if (this.expanded.includes(index)) {
					this.expanded = this.expanded.filter(i => i !== index);
				} else {
					this.expanded.push(index);
				}
			},
			showRejectModal(item) {
				this.currentItem = item;
				this.beizhu = '';
				this.showModal = true;
			},
			hideModal() {
				this.showModal = false;
			},
			submitReject(item) {
				if (this.beizhu.trim() === '') {
					uni.showToast({
						title: '请输入驳回理由',
						icon: 'none'
					});
					return;
				}
				const updatedItem = {
					...item,
					jianjie: this.beizhu
				};
				this.rejectLeave(updatedItem);
				this.hideModal();
			},
			approveLeave(item) {
				const self = this;
				uni.request({
					url: 'http://localhost:8085/teacher/accept',
					method: 'POST',
					data: item,
					success: (res) => {
						console.log('请求成功:', res.data);
						if (res.data.success) {
							uni.showToast({
								title: '审批完成!',
								icon: 'success'
							});
							self.queryleavelist();
						} else {
							uni.showToast({
								title: '审批失败，请重试!',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
						uni.showToast({
							title: '请求失败，请检查网络!',
							icon: 'none'
						});
					}
				});
			},
			queryleavelist() {
				uni.request({
					url: 'http://localhost:8085/teacher/processing',
					method: 'POST',
					data: {
						account: this.account
					},
					success: (res) => {
						console.log('请求成功:', res.data);
						if (res.data.success) {
							this.leaveList = res.data.data;
						} else {
							uni.showToast({
								title: '请求失败!!!',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			switchTab(tab) {
				this.currentTab = tab;
			},
			leaveDetail(e) {
				console.log('当前点击的请假信息:', e);
			},
			rejectLeave(item) {
				const self = this;
				uni.request({
					url: 'http://localhost:8085/teacher/reject',
					method: 'POST',
					data: item,
					success: (res) => {
						console.log('请求成功:', res.data);
						if (res.data.success) {
							uni.showToast({
								title: '审批成功!',
								icon: 'success'
							});
							self.queryleavelist();
						} else {
							uni.showToast({
								title: '审批失败，请重试!',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
						uni.showToast({
							title: '请求失败，请检查网络!',
							icon: 'none'
						});
					}
				});
			},
			isLeave(status) {
				if (status === 0) return '/uni_modules/leave-list/static/daishenpi.png';
				if (status === 1) return '/uni_modules/leave-list/static/tongguo.png';
				if (status === 2) return '/uni_modules/leave-list/static/bohui.png';
			},
			setStyle(status, type) {
				if (type === 'width') {
					if (status === 0) return 180;
					if (status === 1) return 150;
					if (status === 2) return 160;
				}
				if (type === 'height') {
					if (status === 0) return 160;
					if (status === 1) return 150;
					if (status === 2) return 150;
				}
			}
		}
	}
</script>

<style lang="scss">
	$accent-color: #007AFF; // 蓝色，用作高亮和按钮颜色
	$error-color: #FF3B30; // 红色，用作错误提示
	$page-bg-color: #f5f5f5; // 添加这个变量定义

	page {
		background-color: $page-bg-color;
		font-family: 'Poppins', sans-serif;
		color: #333;
	}

	.tabs view.active {
		color: $accent-color;
	}

	.recordPage {
		padding: 20px 25rpx;
		box-sizing: border-box;
	}

	.tabs {
		display: flex;
		border-top: 1px solid #ccc;
		padding: 10px 0;
	}

	button {
		padding: 10px 20px; // 原始按钮的 padding
		border-radius: 5px; // 原始按钮的 border-radius
		background-color: $accent-color;
		color: white;
		border: none;
		outline: none;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		cursor: pointer;
		transition: background-color 0.3s ease;

		&:active {
			background-color: darken($accent-color, 10%);
		}

		// 添加新样式，用于调整按钮大小为原来的 2/3
		&.smaller {
			padding: 6.67px 13.33px; // 约为原来 padding 的 2/3
			font-size: 14px; // 根据需要调整字体大小
			border-radius: 3px; // 约为原来 border-radius 的 2/3
		}
	}

	.tabs view {
		flex: 1;
		text-align: center;
		cursor: pointer;
	}

	.tabs .active {
		color: red;
	}

	.leave-item {
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 193, 7, 0.5); // 添加淡橘黄色的荧光效果
		overflow: hidden; // 防止子元素的圆角被裁剪
		background-color: #ffffff;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		letter-spacing: 2rpx;
		position: relative;
		margin-bottom: 30rpx;
		transition: box-shadow 0.3s ease; // 添加过渡效果

		&:hover {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 193, 7, 0.7); // 鼠标悬浮时增加荧光效果
		}

		.statImg {
			position: absolute;
			right: 0;
			top: 0rpx;
			transform: rotate(50deg);
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.contenT {
		    display: flex;
		    align-items: center; /* 保持垂直居中 */
		    margin-bottom: 10px;
		  
		    .text1 {
		      margin-right: 10px; /* 为标签和内容之间添加一些间距 */
		      color: rgba(0, 0, 0, 0.7);
		    }
		
		    .text2 {
		      flex-grow: 1; /* 让内容占据剩余空间 */
		      color: #000000;
		      letter-spacing: 0rpx;
		    }
		  }
	}

	input[type="text"] {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.contenT {
		display: flex;
		margin-bottom: 10px;
		justify-content: space-between;
		align-items: center;
	}

	.modal {
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 0.3s ease;
		opacity: 1;

		&-content {
			background-color: white;
			padding: 20px;
			border-radius: 10px;
			width: 90%;
			max-width: 300px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		}
	}

	// .modal-content {
	// 	background-color: white;
	// 	padding: 20px;
	// 	border-radius: 5px;
	// 	width: 90%;
	// 	max-width: 300px;
	// }

	.modal-header {
		font-weight: bold;
	}

	.modal-body {
		margin: 10px 0;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
	}
</style>